<template>
	<view class="page">
		<view class="grid">
			<button class="grid-button" openType="share" plain="false">
				<image class="grid-icon" mode="widthFix" src="/static/img/share-friend.png"></image>
				<view class="grid-milddle">
					<view class="grid-font">发给好友</view>
					<text class="grid-des">与好友一起参与活动</text>
				</view>
				<image class="grid-right" mode="widthFix" src="/static/img/icon-for-right.png"></image>
			</button>
		</view>
		<view class="grid" @tap="poster">
			<image class="grid-icon" src="/static/img/poster.png"></image>
			<view class="grid-milddle">
				<text class="grid-font">生成活动海报</text>
				<text class="grid-des">图片可保存到手机相册</text>
			</view>
			<image class="grid-right" mode="widthFix" src="/static/img/icon-for-right.png"></image>
		</view>
		<view class="grid" @tap="copy">
			<image class="grid-icon" src="/static/img/share3.png"></image>
			<view class="grid-milddle">
				<text class="grid-font">复制活动链接</text>
				<text class="grid-des">可用链接在公众号中跳转活动</text>
			</view>
			<image class="grid-right" mode="widthFix" src="/static/img/icon-for-right.png"></image>
		</view>

		<view class="model" :hidden="hide">
			<image :src="canvasImg"></image>
			<text class="close" @tap="close">X</text>
			<view class="btnsave" @tap="save">保存到相册后可发表朋友圈</view>
		</view>

		<view class="model" :hidden="hide2" @tap="close"></view>
		<view class="bg" :hidden="hide2">
			<view class="title">小程序APPID</view>
			<view class="text">{{ appid }}</view>
			<view class="copy" @tap="copyText" :data-text="appid">复制小程序APPID</view>
			<view style="width: 100%;height: 8px;background: #F3F3F3;margin-bottom: 30px;"></view>
			<view class="title">嵌入公众号文章</view>
			<view class="text">{{ path }}</view>
			<view class="copy" @tap="copyText" :data-text="path">复制路径</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				color: 'common/color',
				color_value: 'common/color_value',
			})
		},
		data() {
			return {
				id: '',
				person_id: '',
				title: '',
				image: '',
				path: '',
				type: 'vote',
				hide: true, //控制画布是否显示
				canvasImg: '',
				hide2: true, //控制连接弹窗
				appid: '',
			};
		},
		onLoad: function(options) {
			this.id = options.id;
			this.title = options.name;
			this.image = options.image;
			this.type = options.type;

			if (options.type == 'vote') {
				this.path = '/pages/vote/index?vote_id=' + this.id
			} else if (options.type == 'person') {
				this.person_id = options.person_id;
				this.path = '/pages/vote/person?vote_id=' + this.id + '&person_id=' + options.person_id;
			}
			this.http('common/getAppid', '', 'get').then(res => {
				this.appid = res.data;
			});
			uni.$u.mpShare = {
				title: this.title,
				path: this.path,
				imageUrl: this.imgUrl + this.image
			}
		},
		onShow() {
			if (getApp().globalData.audio) {
				getApp().globalData.audio.destroy();
				getApp().globalData.audio = null;
			}
		},
		methods: {
			poster() {
				var url = '/pages/poster/poster?type=' + this.type + '&id=';
				if (this.type == 'vote') {
					url += this.id;
				} else if (this.type == 'person') {
					url += this.person_id;
				}
				uni.navigateTo({
					url: url,
				});
			},
			close() {
				this.hide2 = true;
			},
			copy() {
				this.hide2 = false;
			},
			copyText(e) {
				wx.setClipboardData({
					data: e.currentTarget.dataset.text,
					success: function(res) {
						wx.getClipboardData({
							success: function(res) {
								wx.showToast({
									title: '复制成功'
								});
							}
						});
					}
				});
			}
		}
	};
</script>

<style>
	page,
	.page {
		background: #ffffff;
	}

	.grid {
		width: 92.7%;
		height: 175rpx;
		box-shadow: 0 0 16rpx 0 rgba(201, 201, 201, 0.5);
		margin-left: 3.7%;
		background: #ffffff;
		margin-top: 34.7rpx;
		position: relative;
		display: flex;
		align-items: center;
		border-radius: 18rpx;
	}

	.grid-icon {
		width: 80rpx;
		height: 80rpx;
		margin-left: 38rpx;
	}

	.grid-right {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 38rpx;
		top: 69rpx;
	}

	.grid-milddle {
		height: 80rpx;
		width: 70%;
		margin-left: 46rpx;
		position: relative;
	}

	.grid-font {
		font-size: 30rpx;
		position: absolute;
		left: 0;
		top: 0;
		color: #333333;
		font-weight: 600;
		line-height: 30rpx;
	}

	.grid-des {
		font-size: 24rpx;
		color: #777777;
		position: absolute;
		left: 0;
		bottom: 0;
		line-height: 24rpx;
	}

	.grid-formid {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		position: absolute;
	}

	button {
		padding: 0;
		margin: 0;
		background: #ffffff;
		border-radius: 18rpx;
	}

	.grid-button {
		position: relative;
		width: 100%;
		height: 175rpx;
		display: flex;
		align-items: center;
	}

	.button-hover {
		background: #ffffff;
	}

	button[plain] {
		border: none;
	}

	.model {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.7);
		left: 0;
		top: 0;
	}

	.bg {
		width: 80%;
		background: #fff;
		text-align: center;
		padding-top: 30px;
		border-radius: 5px;
		padding-bottom: 20px;
		position: fixed;
		z-index: 999999;
		margin: 0 auto;
		top: 15%;
		left: 0;
		right: 0;
	}

	.title {
		width: 100%;
		height: 40px;
		line-height: 40px;
	}

	.text {
		width: 80%;
		margin: 0 auto;
		background: #f3f3f3;
		min-height: 50px;
		line-height: 50px;
		margin-top: 10px;
	}

	.copy {
		width: 150px;
		height: 40px;
		line-height: 40px;
		border-radius: 15px;
		background: #4a90e2;
		color: #fff;
		margin: 0 auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}
</style>
